<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>question</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>



    <script src="./popper.js/dist/umd/popper.min.js"></script>
    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">

    <script src="./summernote/dist/summernote-bs4.js"></script>
    <script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>
</head>

<body>

    <div class="container" style="margin: 20px auto;" id="questionApp">

        <button type="button" class="btn btn-primary" @click="fnShowQuestionModal">add</button>

        <button type="button" class="btn btn-link" @click="fnUp">上一页</button>
        <button type="button" class="btn btn-link" @click="fnDown">下一页</button>

        <div class="card" v-for="(item, index) in dataList" :key="index" style="margin-top: 20px;">
            <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
            <div class="card-body">
                <!--<h4 class="card-title">{{item.sname}}</h4>-->
                <table class="table table-responsive-sm">
                    <tbody class="w-100">

                        <tr class="row mx-0">
                            <td class="col-3">title</td>
                            <td class="col-9">{{item.title}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">问题</td>
                            <td class="col-9">

                                <div v-html="item.qus">
                                    <!--{{item.qus}}-->
                                </div>
                            </td>
                        </tr>
                        <!--<tr class="row mx-0">-->
                            <!--<td class="col-3">答案</td>-->
                            <!--<td class="col-9">{{item.ans}}</td>-->
                        <!--</tr>-->
                        <tr class="row mx-0">
                            <td class="col-3">说明</td>
                            <td class="col-9">{{item.note}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">操作</td>
                            <td class="col-9">

                                <button type="button" class="btn btn-link" @click="fnShowUpdateModal(item)">修改</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>




        <!-- 模态框 -->
        <div class="modal fade" id="questionModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <form>

                            <div class="form-group">
                                <label for="">title</label>
                                <input type="text" class="form-control" v-model="questionForm.title">
                            </div>
                            <div class="form-group">
                                <label for="">问题</label>
                                <textarea class="form-control" id="qus" v-model="questionForm.qus" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="">答案</label>
                                <textarea class="form-control" id="ans" v-model="questionForm.ans" rows="3"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="">说明</label>
                                <textarea class="form-control" v-model="questionForm.note" rows="3"></textarea>
                            </div>


                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                    </div>

                </div>
            </div>
        </div>



    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#questionApp',
        data: {

            pageNum: 0,
            questionForm: {

            },
            dataList: []

        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //上一页
            fnUp(){
                this.pageNum--;
                if(this.pageNum < 0){
                    this.pageNum = 0;
                }
                this.queryQuestion();
            },

            //下一页
            fnDown(){

                this.pageNum++;
                if(this.pageNum > 100){
                    this.pageNum = 100;
                }

                this.queryQuestion();
            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },


            // 新增 modal
            fnShowQuestionModal() {

                $('#questionModal').modal('show');
            },


            //修改 modal
            fnShowUpdateModal(item) {
                this.questionForm = item;
                $('#qus').summernote('code', item.qus);
                $('#ans').summernote('code', item.ans);
                $('#questionModal').modal('show');
            },



            //修改 item
            fnSave() {


                if (!this.questionForm.title) {
                    alert('title不能为空');
                    return false;
                }

                this.questionForm.qus = $('#qus').summernote('code');
                this.questionForm.ans = $('#ans').summernote('code');

                if (!this.questionForm.qus) {
                    alert('问题不能为空');
                    return false;
                }

                var _self = this;

                var postUrl = '/questions';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.questionForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#questionModal').modal('hide');
                            _self.questionForm = {};
                            _self.queryQuestion();
                        }

                    }
                });
            },






            // 查询 cate
            queryQuestion() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./questions?page=" + this.pageNum,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },


        },
        mounted() {

            this.queryQuestion();


            $('#qus').summernote({
                height: 300,                 // set editor height
                minHeight: null,             // set minimum height of editor
                maxHeight: null,             // set maximum height of editor
                focus: true ,                 // set focus to editable area after initializing summernote
                placeholder: '',
                tabsize: 2,
                height: 200,
                // lang: 'zh-CN',
                disableDragAndDrop: false,
                dialogsInBody: true,
                callbacks: {
                    onImageUpload: function (files, editor, $editable) {

                        // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                        var data = new FormData();

                        // 将文件加入到file中，后端可获得到参数名为“file”
                        data.append("file", files[0]);

                        // ajax上传
                        $.ajax({
                            data: data,
                            type: "POST",
                            url: "file-items/upload", // div上的action
                            cache: false,
                            contentType: false,
                            processData: false,

                            // 成功时调用方法，后端返回json数据
                            success: function (response) {

                                console.log(response);

                                if (response.code == 0) {

                                    // editor.insertImage($editable, '../' + response.path);
                                    $("#qus").summernote('insertImage',
                                        './' + response.dat.uploadName);
                                }
                            },
                            // ajax请求失败时处理
                            error: function () {
                                alert("上传失败！")
                            }
                        });



                    }
                }

            });


            $('#ans').summernote({
                height: 300,                 // set editor height
                minHeight: null,             // set minimum height of editor
                maxHeight: null,             // set maximum height of editor
                focus: true ,                 // set focus to editable area after initializing summernote
                placeholder: '',
                tabsize: 2,
                height: 200,
                // lang: 'zh-CN'
            });

            // var _self = this;
            // setTimeout(function(){
            //     console.log('dataList = ', _self.dataList);
            //     $.each(_self.dataList, item => {
            //         $('#summernote-' + item.sid).summernote();
            //         $('#summernote-' + item.sid).summernote('code', item.qus);
            //     });
            // }, 0);


            // $('.summernote-qus').summernote({
            //     height: 300,                 // set editor height
            //     placeholder: '',
            //     tabsize: 2,
            //     height: 200,
            //     lang: 'zh-CN'
            // });
        }
    })


</script>